<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
    <title>会员注册</title>
    <meta content="" name="keywords">
    <meta content="" name="description">
    <script src="js/rem.js"></script>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <link href="css/base.css" rel="stylesheet" type="text/css"/>
    <link href="css/page.css" rel="stylesheet" type="text/css"/>
    <link href="css/all.css" rel="stylesheet" type="text/css"/>
    <link href="css/mui.min.css" rel="stylesheet" type="text/css"/>
    <link href="css/loaders.min.css" rel="stylesheet" type="text/css"/>
    <link href="css/loading.css" rel="stylesheet" type="text/css"/>
    <link href="slick/slick.css" rel="stylesheet" type="text/css"/>
</head>
<!--loading页开始-->
<div class="loading">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<!--loading页结束-->
<body>
<div class="login clearfloat box-s">
    <h3>会员注册</h3>
    <div class="list clearfloat">
        <ul>
            <li class="ra3">
                <p class="fl clearfloat">
                    <span class="opa5"></span>
                    <i class="iconfont icon-yonghuming"></i>
                </p>
                <div class="nr clearfloat fl">
                    <span class="opa3"></span>
                    <input id="account" onfocusout="checkAccount(this.value)" placeholder="账号" required
                           type="text"/>
                </div>
            </li>
            <li class="ra3">
                <p class="fl clearfloat">
                    <span class="opa5"></span>
                    <i class="iconfont icon-mima"></i>
                </p>
                <div class="nr clearfloat fl">
                    <span class="opa3"></span>
                    <input id="password" placeholder="登录密码" required type="text"/>
                </div>
            </li>
            <li class="ra3">
                <p class="fl clearfloat">
                    <span class="opa5"></span>
                    <i class="iconfont icon-mima"></i>
                </p>
                <div class="nr clearfloat fl">
                    <span class="opa3"></span>
                    <input id="passwordRepeat" placeholder="确认密码" required type="text"/>
                </div>
            </li>
            <li class="ra3">
                <p class="fl clearfloat">
                    <span class="opa5"></span>
                    <i class="iconfont icon-shouji"></i>
                </p>
                <div class="nr clearfloat fl">
                    <span class="opa3"></span>
                    <input id="phone" onfocusout="checkPhone(this.value)" placeholder="手机号码" required
                           type="text" value=""/>
                </div>
            </li>
        </ul>
    </div>
    <div class="login-btn" onclick="register()">
        <a>注册</a>
    </div>
    <div class="mima mimaone clearfloat">
        <ul>
            <li class="fr">
                <a href="login.html">立即登录</a>
            </li>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript">
    $(window).load(function () {
        let loading = $(".loading")
        loading.addClass("loader-chanage");
        loading.fadeOut(300)
    });

    function isEmpty(val) {
        if (val === null || val === undefined || val === '') {
            return true;
        }
    }

    let isPhoneRepeat;
    let isAccountRepeat;

    /**
     * 检查手机号是否存在
     * @param value
     */
    function checkPhone(value) {
        let url = 'api/user/checkPhone?phone=' + value;
        $.ajax({
            url: url,
            type: 'GET',
            success: function (result) {
                isPhoneRepeat = result.data;
            }
        })
    }

    function checkAccount(value) {

        let url = 'api/user/checkAccount?account=' + value;
        $.ajax({
            url: url,
            type: 'GET',
            params: {
                account: value,
            },
            success: function (result) {
                isAccountRepeat = result.data;
            }
        })
    }

    function register() {
        let account = $('#account').val();
        let phone = $('#phone').val();
        let password1 = $('#password').val();
        let password2 = $('#passwordRepeat').val();
        if (isEmpty(account) || isEmpty(phone) || isEmpty(password1) || isEmpty(password2)) {
            alert('请检查输入');
            return;
        }

        if (isAccountRepeat || isPhoneRepeat) {
            alert('账号或者手机号重复');
            return;
        }
        if (password1 !== password2) {
            alert('两次密码不一致');
            return;
        }
        let url = 'api/user/register';
        $.ajax({
            url: url,
            type: 'POST',
            data: {
                account: account,
                password: password1,
                phone: phone,
            },
            success: function (result) {
                if (result.code === 1) {
                    alert('恭喜您,注册成功');
                    location.replace('login.html');
                } else {
                    alert(result.msg);
                }
            }
        })
    }
</script>
</html>
